@import './reset';

.container {
    // 主题颜色
    $themeColor: #1b2a65;
    $themeColor-Opa: #1b2a653d;

    // 居中盒子
    %boxCenter {
        display: flex;
        flex-direction: column;
        align-items: center;
        // background-color: greenyellow;
    }

    header {
        background-color: #fff;
        @extend %boxCenter;

        // 导入导航栏样式
        @import './nav';

        // 横幅大图
        .banner {
            max-width: 100%;
            @extend %boxCenter;
            position: relative;

            img {
                width: 100%;
                display: block;
            }

            .imgTitle {
                width: 1200px;
                // border: 1px solid red;
                position: absolute;
                bottom: 250px;
                color: #fffefe;

                .title {
                    // border: 1px solid red;
                    display: inline-block;

                    p:first-child {
                        font-size: 52px;
                        text-align: right;
                    }

                    p:last-child {
                        font-size: 36px;
                    }
                }
            }
        }
    }

    main {
        section {
            @extend %boxCenter;

            &>div {
                width: 1200px;
            }

            &:first-child {
                margin-bottom: 35px;
                border-bottom: 1px solid $themeColor-Opa;

                .content_1 {
                    width: 1200px;
                    height: 65px;

                    ul {
                        margin-top: 2px;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: space-around;
                        align-items: flex-end;

                        li {
                            cursor: pointer;
                            padding: 20px 55px;
                            border-bottom: 2px solid transparent;

                            &:first-child {
                                color: $themeColor;
                                border-bottom-color: $themeColor;
                            }

                            &:hover {
                                color: $themeColor;
                                border-bottom-color: $themeColor;
                            }
                        }
                    }
                }
            }

            &:last-child {
                .content_2 {
                    ul {
                        li {
                            height: 280px;
                            border: 1px solid transparent;
                            display: flex;
                            align-items: center;
                            margin: 10px 0;

                            &:hover {
                                border: 1px solid $themeColor-Opa;
                            }

                            .c2_imgBox {
                                padding: 0 60px;

                                img {
                                    display: block;
                                    width: 340px;
                                    margin: 0 auto;
                                }

                            }

                            .c2_details {
                                h3 {
                                    font-size: 18px;
                                    font-weight: 400;
                                }

                                p {
                                    color: #666666;
                                    font-size: 14px;
                                    line-height: 22px;

                                    &:first-of-type {
                                        margin: 20px 0;
                                    }
                                }

                                a {
                                    color: #1e4677;
                                    font-size: 18px;
                                    margin-top: 25px;
                                    display: inline-block;
                                }
                            }
                        }
                    }

                    button {
                        width: 100%;
                        height: 50px;
                        background-color: $themeColor;
                        color: #fff;
                        font-size: 18px;
                        margin: 20px 0 80px
                    }
                }
            }
        }
    }

    @import './footer';
}